<%@ page language="java" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://hol.com/functions" prefix="hfn"%>
<c:set var="path" value="${pageContext.request.contextPath}"/>

<!DOCTYPE html>
<html>
<head>
<base href="${path}/background/">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>联盟之家后台管理</title>
<link rel="stylesheet" href="${path}/layui/css/layui.css">
</head>
<body>
	
<div class="layui-fluid">
	<div class="layui-form" style="margin-top: 10px">
		<input type="hidden" name="userId" value="${user.userId}">
  		<div class="layui-form-item">
    		<label class="layui-form-label">用户名</label>
    		<div class="layui-input-block">
      			<input type="text" name="userName" value="${user.userName}" lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">
    		</div>
  		</div>
  			<div class="layui-form-item">
  			<label class="layui-form-label">用户头像</label>
    		<div class="layui-input-block">
      		
				<span id="imgpath" style="margin-left:20px;">
					<c:if test="${!empty user.userPic}">
						<img alt="" src="${user.userPic}" height="150px" width="150px"  style="border:3px solid silver;"/>
					</c:if>
				</span>
					<button type="button" class="layui-btn" id="imgbtn">
  					<i class="layui-icon">&#xe67c;</i> 上传头像  					
				</button>
				<input type="hidden" name="userPic" id="artTitPic" value="${user.userPic}">
    		</div>
  		</div>  		
  		<div class="layui-form-item">
 		   <label class="layui-form-label">性别</label>
 		   <div class="layui-input-block">
  			    <input id="man" type="radio"  name="userGender" value="男" title="男" <c:if test="${user.userGender=='男' }">checked</c:if>>
  			    <input id="woman" type="radio"  name="userGender" value="女" title="女" <c:if test="${user.userGender=='女' }">checked</c:if>>
  		  </div>
  		</div>
  		<div class="layui-form-item">
    		<label class="layui-form-label">用户口令</label>
    		<div class="layui-input-block">
      			<input type="text" name="userPassword" value="${user.userPassword}" lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
    		</div>
  		</div>
  		<div class="layui-form-item">
    		<label class="layui-form-label">联系方式</label>
    		<div class="layui-input-block">
      			<input type="text" name="userPhone" value="${user.userPhone}" lay-verify="required" placeholder="请输入联系方式" autocomplete="off" class="layui-input">
    		</div>
  		</div>
  		<div class="layui-form-item">
    		<label class="layui-form-label">用户类型</label>
    		<div class="layui-input-block">
      			<select name="userTypeId" lay-verify="required">
      				<c:forEach var="d" items="${hfn:dict('用户类型') }">
      					<option value="${d.itemId }" <c:if test="${d.itemId==user.userTypeId }">selected</c:if>>${d.itemValue }</option>
      				</c:forEach>
      			</select>
    		</div>
  		</div>
  		<div class="layui-form-item layui-hide">
	      	<input type="button" lay-submit lay-filter="lay-form-submit" id="lay-form-submit">
	    </div>
</div>
  
  		
<script type="text/javascript" src="${path}/foreground/js/jquery-3.3.1.min.js"></script>
  	<script src="${path }/layui/layui.js"></script>
	<script>
	$(function(){
		$("#man").click(function(){
			$("#man").prop('checked',true);
		});
	});
	layui.use(['form', 'upload'], function(){
		var form = layui.form;
		var $ = layui.$;
		var upload = layui.upload;
		
		
		
		//图片上传
		upload.render({
			elem: '#imgbtn',
			url: '${path}/api/upload',
			done: function(resp) {
				if(resp.success) {
					$('#artTitPic').val(resp.data.src);
					$('#imgpath').html('<img  src="'+resp.data.src+'" height="150px" width="150px"  style="border:3px solid silver;" />');
				}	

			}			
		});
		//监听提交
    	form.on('submit(lay-form-submit)', function(data) {
      		var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引  
      		//提交ajax成功后，关闭当前弹层并重载表格
      		$.post('${path}/action/user/save', data.field, function(json) {
      				parent.layui.table.reload('lay-table'); //重载表格
      	      		parent.layer.close(index); //再执行关闭      				
      			}, 'JSON');
    	});
		
	});	
	
	</script>
</div>

</body>
</html>

